<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<!-- 
		 DOM 能干啥
		 1、获取标签
		 2、操作元素的内容
		 3、操作标签的属性
		 4、操作标签的样式（css）
		 5、元素的事件操作
		 -->
		 
		 <div class="demo">
			 我是测试文字
			 <img src="img/ganlai.gif" alt="" width="100">
			 <a href="">aaaaa</a>
		 </div>
		 <div class="demo2"></div>
		 
		 <script type="text/javascript">
		 	/*	innerText 
					获取内容：获取的是标签中纯文本内容
					设置内容：设置内容时，也是只作为纯文本展示，不会解析标签
				innerHTML
					获取内容：获取元素的全部内容（纯文本+子标签）
					设置内容：设置文本时，可以识别标签结构并解析
			*/
			
			// 获取 元素
			var demo = document.querySelector(".demo")
			var demo2 = document.querySelector(".demo2")
			
			// 获取demo中的内容
			var text = demo.innerHTML
			console.log(text)
			console.log(typeof text)
			
			// 设置demo2的内容
			demo2.innerHTML = text
			
		 </script>
	</body>
</html>
